<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title>
    <link rel="stylesheet" href="../css/TBreset.css" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3205612_zy2xry3e15a.css"
    />
    <script src="../js/axios.min.js"></script>
    <style>
      #big {
        height: 800px;
        padding: 30px 18px 100px 18px;
        background-color: #15171e;
      }
      /* ***一 */
      #Header {
        width: 1484px;
        height: 57px;
        background-color: #15171e;
      }
      #ul1 {
        width: 340px;
        height: 23px;
        /* background-color: blue; */
        color: #ccc;
        padding: 14px 0 20px 0;
        float: right;
      }
      #ul1 li {
        float: left;
        margin: 0 20px 0 26px;
      }
      /* 下载图标 */
      .icon-download {
        color: #0094ff;
      }
      /* 下箭头 */
      .icon-xiajiantou {
        color: #57595e;
        position: absolute;
        right: 48px;
        top: 48px;
      }
      #ul1 li:hover {
        color: #fff;
      }
      #ul1 li:nth-child(3):hover .icon-xiajiantou {
        color: #ccc;
      }
      .icon-shangjiantou-copy {
        position: absolute;
        right: 48px;
        top: 46px;
        display: none;
      }
      /* 遮罩层 */
      #bg {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 100;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
      }

      #triangle {
        width: 0px;
        height: 0px;
        border-top: 10px solid rgba(0, 0, 0, 0);
        border-bottom: 10px solid #273042;
        border-left: 10px solid rgba(0, 0, 0, 0);
        border-right: 10px solid rgba(0, 0, 0, 0);
        position: absolute;
        right: 46px;
        top: 67px;
        display: none;
      }
      #ul2 {
        width: 400px;
        height: 254px;
        background-color: #1a1c23;
        color: #fff;
        border: 1px solid #57595e;
        border-radius: 5px;
        position: absolute;
        right: 19px;
        top: 87px;
        padding: 30px 21px 30px 21px;
        display: none;
      }
      #ul2 li:nth-child(1) button {
        width: 100%;
        height: 53px;
        background-color: #0094ff;
        border: none;
        border-radius: 10px;
        color: #fff;
        margin-bottom: 30px;
      }
      #ul2 li:nth-child(2) {
        width: 100%;
        height: 1px;
        background-color: #ccc;
      }
      #ul2 li:nth-child(3) {
        margin-top: 58px;
      }
      #ul2 li:nth-child(4) {
        margin-top: 50px;
      }

      /* ***二 */
      #Nav {
        position: sticky;
        width: 1484px;
        height: 104px;
        background-color: #15171e;
        top: 0px;
        z-index: 20;
      }
      #ul3 {
        box-sizing: border-box;
        height: 65px;
        padding: 22px 0 18px 0;
      }
      #ul3 li {
        float: left;
        border-radius: 5px;
        line-height: 65px;
      }
      #ul3 li:nth-child(1) {
        width: 938px;
        height: 65px;
        background-color: #23252b;
        margin-right: 15px;
        padding-left: 22px;
        color: #c2c2c2;
        position: relative;
      }
      #ul3 li:nth-child(1) .span1 {
        position: absolute;
        width: 94px;
        height: 65px;
        /* background-color: green; */
        text-align: center;
        left: 0;
      }
      /* 总览下边框 */
      #zlXia1 {
        position: relative;
        width: 0px;
        height: 3px;
        background-color: blue;
        top: 22px;
        left: 47px;
      }
      #zlXia2 {
        position: relative;
        width: 0px;
        height: 3px;
        background-color: blue;
        top: 19px;
        left: 47px;
      }
      #ul3 li:nth-child(1) .span1:hover {
        background-color: #303237;
        color: #fff;
      }

      /* 总览 */
      #zonglan {
        position: absolute;
        width: 700px;
        height: 299px;
        margin-top: 25px;
        border-radius: 5px;
        color: #919295;
        display: none;
      }
      #zonglan img {
        width: 18px;
      }
      #zonglan ul {
        box-sizing: border-box;
        width: calc(700px / 3);
        height: 299px;
        float: left;
      }
      #zonglan li {
        line-height: 40px;
      }
      #zonglan li:hover{
        background-color: #3d3f46;
      }
      #zonglan #ul4 {
        background-color: #1a1c23;
        padding: 23px 0 33px 20px;
      }

      #zonglan #ul4 li:nth-child(1) {
        height: 73px;
      }
      #zonglan #ul5 {
        background-color: #1a1c23;
        padding: 23px 0 33px 20px;
      }
      #zonglan #ul5 li:nth-child(1) {
        height: 73px;
      }
      #zonglan #ul6 {
        background-color: #1a1c23;
        padding: 23px 0 33px 20px;
      }
      #zonglan #ul6 li:nth-child(1) {
        height: 73px;
      }
      #ul3 li:nth-child(1) .span2 {
        position: absolute;
        top: 0px;
        left: 64px;
      }
      #ul3 li:nth-child(2) {
        width: 270px;
        height: 65px;
        background-color: #23252b;
        margin-right: 15px;
        padding-left: 20px;
      }
      /* search */
      #ul3 li:nth-child(2) input {
        width: 224px;
        height: 65px;
        margin-left: 20px;
        border: none;
        border-radius: 5px;
        outline: none;
        background-color: #23252b;
        font-size: 17px;
        position: absolute;
        color: #c2c2c2;
      }
      #ul3 li:nth-child(3) {
        width: 65px;
        height: 65px;
        background-color: #23252b;
        margin-right: 15px;
        text-align: center;
      }
      /* ❤ */
      #ul3 li:nth-child(3) span {
        font-size: 26px;
        color: #c2c2c2;
      }
      #ul3 li:nth-child(3) span:hover {
        color: #fff;
      }
      #ul3 li:nth-child(3):hover {
        background-color: #303237;
      }
      #ul3 li:nth-child(4) {
        width: 123px;
        height: 65px;
        background-color: #23252b;
        text-align: center;
        color: #c2c2c2;
      }
      #ul3 li:nth-child(4):hover {
        color: #fff;
        background-color: #303237;
      }

      /* 返回顶部 */
      #Top {
        position: fixed;
        width: 60px;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
        right: 50px;
        bottom: 50px;
        display: none;
        z-index: 300;
      }
      #Top span {
        display: block;
        color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        border: 1px solid #ccc;
        border-radius: 5px;
        border: none;
      }
      #Top span:hover {
        border: 1px solid #ccc;
      }
      #Back {
        position: sticky;
        width: 1484px;
        height: 62px;
        background-color: #15171e;
        top: 104px;
        z-index: 3;
      }
      #back {
        width: 62px;
        height: 62px;
        /* background-color: #0094ff; */
        margin-left: 15px;
        text-align: center;
      }
      #back span {
        font-size: 30px;
        line-height: 62px;
        color: #bebec0;
      }
      #back span:hover {
        color: #fff;
        transition: all 0.3s linear;
      }

      /* 背景 */
      #Info {
        position: relative;
        width: 1484px;
        height: 568px;
        background: url(../images/推荐/02.jpg) center cover no-repeat;
      }
      #Info img {
        width: 1484px;
        height: 568px;
      }
      #info {
        position: absolute;
        width: 500px;
        height: 568px;
        background-color: #22242c;
        right: 30px;
        top: 50px;
      }
      #info li:nth-child(1) {
        box-sizing: border-box;
        width: 500px;
        height: 100px;
        /* background-color: yellowgreen; */
        padding: 30px 50px 0 30px;
        margin-bottom: 50px;
      }
      #info li:nth-child(1) img {
        width: 50px;
        height: 50px;
      }
      #info li:nth-child(1) span {
        position: absolute;
        font-size: 28px;
        color: #fff;
      }
      #info li:nth-child(2) {
        width: 470px;
        height: 50px;
        background-color: #ffb400;
        line-height: 50px;
        padding-left: 30px;
        margin-bottom: 20px;
      }
      #info li:nth-child(3) {
        position: absolute;
        width: 460px;
        height: 60px;
        background-color: #22242c;
        left: 10px;
        border-radius: 5px;
        line-height: 60px;
        font-size: 24px;
        color: #c1c2c4;
        padding-left: 20px;
      }
      #info li:nth-child(3):hover {
        background-color: #2f3138;
        color: #fff;
        border-left: 5px solid blue;
        width: 460px;
        padding-left: 15px;
        transition: all 0.2s linear;
      }
      #info li:nth-child(4) {
        position: absolute;
        width: 460px;
        height: 60px;
        background-color: #22242c;
        left: 10px;
        bottom: 226px;
        border-radius: 5px;
        line-height: 60px;
        font-size: 24px;
        color: #c1c2c4;
        padding-left: 20px;
      }
      #info li:nth-child(4):hover {
        background-color: #2f3138;
        color: #fff;
        border-left: 5px solid blue;
        width: 460px;
        padding-left: 15px;
        transition: all 0.2s linear;
      }
      #info li:nth-child(5) input {
        position: absolute;
        width: 440px;
        height: 60px;
        background-color: #0094ff;
        bottom: 160px;
        left: 30px;
        border: none;
        border-radius: 10px;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
      }
      #info li:nth-child(5):hover input {
        border: 1px solid #06ffea;
      }
      #info li:nth-child(6) input {
        position: absolute;
        width: 440px;
        height: 60px;
        background-color: #3d3f46;
        bottom: 90px;
        left: 30px;
        border: none;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        border-radius: 10px;
      }
      #info li:nth-child(6):hover input {
        border: 1px solid #ccc;
      }
      #info li:nth-child(7) span {
        position: absolute;
        font-size: 30px;
        bottom: 34px;
        left: 140px;
        color: #fff;
        z-index: 2;
      }
      #info li:nth-child(7) input {
        position: absolute;
        width: 440px;
        height: 60px;
        background-color: #15171e;
        bottom: 20px;
        left: 30px;
        border: none;
        font-size: 24px;
        font-weight: 700;
        color: #fff;
        border-radius: 10px;
      }
      #info li:nth-child(7):hover input {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <!-- ***大 -->
    <div id="big">
      <!-- ***一 -->
      <div id="Header">
        <img src="../images/LOG.jpg" alt="" />
        <ul id="ul1">
          <li><span class="iconfont icon-download"></span>下载战网</li>
          <li>支持</li>
          <li class="li3">
            我的账户<span class="iconfont icon-xiajiantou"></span>
          </li>
          <span class="iconfont icon-shangjiantou-copy"></span>
        </ul>
        <div id="bg">这是遮罩层</div>
        <div id="triangle"></div>
        <ul id="ul2">
          <li><button id="loginBtn">登录</button></li>
          <li></li>
          <li class="iconfont icon-setting"><span>账户</span></li>
          <li class="iconfont icon-tianjiayonghu signBtn">
            <span>免费注册</span>
          </li>
        </ul>
      </div>
      <!-- ***二 -->
      <div id="Nav">
        <ul id="ul3">
          <li class="li1">
            <span class="span1">总览</span
            ><span class="iconfont icon-xiajiantou2-copy span2"></span>
          </li>
          <li
            class="iconfont icon-Fangdajing"
            style="color: #c2c2c2; font-size: 26px"
          >
            <input type="search" placeholder="搜索商城" />
          </li>
          <li class="li3"><span class="iconfont icon-heart"></span></li>
          <li class="li4">
            战网点数<span class="iconfont icon-xiajiantou3-copy"></span>
          </li>
        </ul>
        <!-- 总览下边框 -->
        <div id="zlXia1"></div>
        <div id="zlXia2"></div>

        <!-- 总览 -->
        <div id="zonglan">
          <ul id="ul4">
            <li>游戏</li>
            <li>
              <span><img src="../images/01.jpg" alt="" /></span>&nbsp; 魔兽世界
            </li>
            <li>
              <span><img src="../images/02.jpg" alt="" /></span>&nbsp;
              魔兽世界(经典怀旧服)
            </li>
            <li>
              <span><img src="../images/03.jpg" alt="" /></span>&nbsp; 炉石传说
            </li>
            <li>
              <span><img src="../images/04.jpg" alt="" /></span>&nbsp; 守望先锋
            </li>
            <li>
              <span><img src="../images/05.jpg" alt="" /></span>&nbsp;
              暗黑破坏神III
            </li>
          </ul>
          <ul id="ul5">
            <li></li>
            <li>
              <span><img src="../images/06.jpg" alt="" /></span>&nbsp;
              星际争霸II
            </li>
            <li>
              <span><img src="../images/07.jpg" alt="" /></span>&nbsp; 星际争霸
            </li>
            <li>
              <span><img src="../images/08.jpg" alt="" /></span>&nbsp;
              魔兽争霸III
            </li>
            <li>
              <span><img src="../images/09.jpg" alt="" /></span>&nbsp; 风暴英雄
            </li>
          </ul>
          <ul id="ul6">
            <li>服务</li>
            <li>战网昵称修改服务</li>
            <li>使用兑换码</li>
            <li>周边商城</li>
          </ul>
        </div>
      </div>

      <!-- 返回顶部 -->
      <div id="Top">
        <span class="iconfont icon-shuangshangjiantou-"></span>
      </div>

      <!-- 返回首页 -->
      <div id="Back">
        <div id="back"><span class="iconfont icon-home"></span></div>
      </div>

      <!-- 商品信息 -->
      <div id="Info">
        <!-- ******** -->
        <img src="../images/HS.jpg" alt="" />
        <div id="info">
          <ul id="ul12">
            <li>
              <img src="../images/05.jpg" alt="" />
              <span>《暗黑皮坏神®III:夺魂之镰》</span>
            </li>
            <li>动作角色扮演游戏</li>
            <li>无限畅玩包 ￥ 198</li>
            <li>数字典藏包 ￥ 388</li>
            <li><input type="button" value="立即购买" /></li>
            <li><input type="button" value="赠礼" /></li>
            <li>
              <span class="iconfont icon-tubiaozhizuomoban- liXin"></span
              ><input type="button" value="添加至心愿单" id="goCart"/>
            </li>
          </ul>
        </div>
        <!-- ******** -->
      </div>
    </div>

    <!-- <script src="../js/01.js"></script> -->
    <script src="../js/go cart.js"></script>

    <script>
      // let userId = 


      // ***账户
      let li3 = document.querySelector("#ul1 .li3");
      let span3 = document.querySelector("#ul1 .icon-shangjiantou-copy");
      let span2 = document.querySelector("#ul1 .icon-xiajiantou");
      // console.log(Boolean(span3));
      let triangle = document.querySelector("#triangle");
      let ul2 = document.querySelector("#ul2");
      let bg = document.querySelector("#bg");
      let loginBtn = document.querySelector("#ul2 #loginBtn");

      // ***账户
      let flag = false;
      li3.onclick = function () {
        if (flag) {
          span2.style.display = "block";
          span3.style.display = "none";
          flag = false;
          triangle.style.display = "none";
          ul2.style.display = "none";
          bg.style.display = "none";
        } else {
          span2.style.display = "none";
          span3.style.display = "block";
          flag = true;
          triangle.style.display = "block";
          ul2.style.display = "block";
          bg.style.display = "block";
          bg.style.zIndex = "1";
          triangle.style.zIndex = "10";
          ul2.style.zIndex = "30";
        }
      };

      // 点击登录按钮后跳转至登录页
      loginBtn.onclick = function () {
        location.href = "login.html";
      };


      // ***总览
      // 总览按钮
      let zonglanBtn = document.querySelector("#ul3 .li1 .span1");
      // 总览箭头
      let zonglanJt = document.querySelector("#ul3 .li1 .span2");
      // 总览下边框
      let zlXia1 = document.querySelector("#zlXia1");
      let zlXia2 = document.querySelector("#zlXia2");
      // 总览div
      let zonglanDiv = document.querySelector("#zonglan");
      let animation = true;
      zonglanBtn.onclick = function () {
        if (animation) {
          zonglanJt.style.transform = "rotate(180deg)";
          zonglanJt.style.transition = "all .3s";
          zlXia1.style.width = "47px";
          zlXia1.style.transition = "all .5s";
          zlXia2.style.width = "47px";
          zlXia2.style.transform = "translateX(-44px)";
          zlXia2.style.transition = "all .5s";
          zonglanDiv.style.display = "block";

          zonglanDiv.style.transition = "all .5s";
          zonglanDiv.style.zIndex = "-1";
          animation = false;
        } else {
          zonglanJt.style.transform = "rotate(0deg)";
          zonglanJt.style.transition = "all .3s";
          zlXia1.style.width = "0px";
          zlXia1.style.transform = "translateX(0px)";
          zlXia1.style.transition = "all .5s";
          zlXia2.style.width = "0px";
          zlXia2.style.transform = "translateX(0px)";
          zlXia2.style.transition = "all .5s";
          zonglanDiv.style.display = "none";
          zonglanDiv.style.transition = "all .5s";
          animation = true;
        }
        console.log(document.documentElement);
      };

      // 注册
      let signBtn = document.querySelector("#Header #ul2 .signBtn");
      signBtn.onclick = function () {
        location.href = "sign.html";
      };

      let Top = document.querySelector("#Top");
      // ***返回顶部
      // 当网页向下滑动 20px 出现"返回顶部" 按钮
      window.onscroll = function () {
        // console.log(1);
        scrollFunction();
      };

      function scrollFunction() {
        if (
          document.body.scrollTop > 150 ||
          document.documentElement.scrollTop > 150
        ) {
          document.getElementById("Top").style.display = "block";
        } else {
          document.getElementById("Top").style.display = "none";
        }
      }

      // 点击按钮，返回顶部
      Top.onclick = function () {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      };

      // ***返回首页
      let backSpan = document.querySelector("#back span");
      backSpan.onclick = function () {
          console.log(1);
        location.href = "battlenet shop.html";
      };

    </script>
  </body>
</html>
